<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0102: Grid Column &amp; Row Spacing | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0102: Grid Column &amp; Row Spacing" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="This GTK Tutorial covers spacing Grid cells by row and column." />
<meta property="og:description" content="This GTK Tutorial covers spacing Grid cells by row and column." />
<link rel="canonical" href="http://localhost:4000/posts/0102-grid-spacing.html" />
<meta property="og:url" content="http://localhost:4000/posts/0102-grid-spacing.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-02-19T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0102: Grid Column &amp; Row Spacing" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2020-02-19T00:00:00-05:00","datePublished":"2020-02-19T00:00:00-05:00","description":"This GTK Tutorial covers spacing Grid cells by row and column.","headline":"0102: Grid Column &amp; Row Spacing","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0102-grid-spacing.html"},"url":"http://localhost:4000/posts/0102-grid-spacing.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/container.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2020-02-19T00:00:00-05:00" itemprop="datePublished">Wednesday, February 19, 2020
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0102-grid-column--row-spacing">0102: Grid Column &amp; Row Spacing</h1>

<p>Last time, we embarked on another <em>CSS</em> adventure and this post is somewhat related. We’ve got another <code class="language-plaintext highlighter-rouge">Grid</code>, but last time we used <code class="language-plaintext highlighter-rouge">setSizeRequest()</code> to give each <code class="language-plaintext highlighter-rouge">Grid</code> square some territory of its own so they wouldn’t looked all shoved together.</p>

<p>But this time, we’re going to do things a little differently. We’ll space them out using two <code class="language-plaintext highlighter-rouge">Grid</code> functions we didn’t get around to talking about last year:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">setRowSpacing()</code>, and</li>
  <li><code class="language-plaintext highlighter-rouge">setColumnSpacing()</code>.</li>
</ul>

<p>Two other <code class="language-plaintext highlighter-rouge">Widget</code>s share these functions:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">IconView</code>, and</li>
  <li><code class="language-plaintext highlighter-rouge">FlowBox</code>.</li>
</ul>

<p>But the <code class="language-plaintext highlighter-rouge">Grid</code>, <code class="language-plaintext highlighter-rouge">IconView</code>, and <code class="language-plaintext highlighter-rouge">FlowBox</code> don’t seem to inherit the spacing functionality from any common ancestor, so we may have to dig into those other <code class="language-plaintext highlighter-rouge">Widget</code>s (eventually) to see if there’s a difference in how they’re handled. Be that as it may…</p>

<h2 id="different-spacing-mechanism-different-visual-result">Different Spacing Mechanism, Different Visual Result</h2>

<p>The first time we did this, the red and blue background colours filled the cells, but this time, they won’t. Here’s the difference, visually:</p>

<!-- 0, 1 -->
<!-- first occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/009_grid/grid_01.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/009_grid/grid_06.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>
	
		<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/009_grid/grid_02_checkerboard_alternate.d" target="_blank">here</a>.
	</div>
	
		<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/009_grid/grid_07_sized_spaced_css.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for first (1st) occurrence of application and terminal screen shots on a single page -->

<p>The differences, code-wise, are worth noting. In the earlier version (on the left, above) we used <code class="language-plaintext highlighter-rouge">setSizeRequest()</code> to size the cells… well, we actually sized the <code class="language-plaintext highlighter-rouge">EventBox</code>es which in turn forced the cells to an appropriate size.</p>

<p>In the second version (on the right, above) we move the functionality up a level to the <code class="language-plaintext highlighter-rouge">Grid</code>, starting with this in the preamble:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">int</span> <span class="n">rowSpacing</span> <span class="p">=</span> <span class="mi">10</span><span class="p">,</span> <span class="n">columnSpacing</span> <span class="p">=</span> <span class="mi">10</span><span class="p">;</span>
</code></pre></div></div>

<p>And then we put these values to use in the constructor like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">setRowSpacing</span><span class="p">(</span><span class="n">rowSpacing</span><span class="p">);</span>
<span class="n">setColumnSpacing</span><span class="p">(</span><span class="n">columnSpacing</span><span class="p">);</span>
</code></pre></div></div>

<p>But the separation we now have between the cells isn’t all that aesthetically pleasing, so let’s bring back the cell sizing by moving that task down a level to <code class="language-plaintext highlighter-rouge">RedLabel</code> and <code class="language-plaintext highlighter-rouge">BlueLabel</code>…</p>

<h2 id="grid-cell-labels-sized-and-spaced">Grid Cell Labels Sized and Spaced</h2>

<p>Here’s what it looks like:</p>

<!-- 2, 3 -->
<!-- second occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/009_grid/grid_07.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/009_grid/grid_07_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/009_grid/grid_07_sized_spaced_css.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for second (2nd) occurrence of application and terminal screen shots on a single page -->

<p>All we’re doing is bringing back this statement in both classes derived from the <code class="language-plaintext highlighter-rouge">Label</code>:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">setSizeRequest</span><span class="p">(</span><span class="mi">60</span><span class="p">,</span> <span class="mi">60</span><span class="p">);</span>
</code></pre></div></div>

<p>You could make the argument that adding this statement to both classes is redundant, and yes, you’d be right. And we could, instead, derive a <code class="language-plaintext highlighter-rouge">SizedLabel</code> class from <code class="language-plaintext highlighter-rouge">Label</code>, then have both <code class="language-plaintext highlighter-rouge">RedLabel</code> and <code class="language-plaintext highlighter-rouge">BlueLabel</code> inherit from it. Neither way is all that elegant. However, there are two reasons why we may want to stick the <code class="language-plaintext highlighter-rouge">SizedLabel</code> class in the middle of things:</p>

<ol>
  <li>if we needed the cell size to be flexible for some reason, or</li>
  <li>we couldn’t make up our minds as to what size is right and didn’t want to keep changing the size in two places as we experimented.</li>
</ol>

<p>In the end, it’s up to you to decide which way works best for you.</p>

<p>One other thing I’d like to mention before we move on is that this demo isn’t aesthetically pleasing (you noticed, right?) because the spacing of the rows is different from the spacing of the columns. I did this on purpose to show that they can be different. That’s my story and I’m sticking to it.</p>

<h2 id="once-more-with-buttons">Once More, with Buttons</h2>

<p>This won’t seem like a big leap right now, but it’s the next step in a progression that will lead us to our a demo in the next post that is a bit of a leap:</p>

<!-- 4, 5 -->
<!-- third occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img4" src="../images/screenshots/016_sfx/sfx_04.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal4" class="modal">																<!-- modal# -->
				<span class="close4">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img44" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal4");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img4");														// img#
			var modalImg = document.getElementById("img44");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close4")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img5" src="../images/screenshots/016_sfx/sfx_04_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal5" class="modal">																			<!-- modal# -->
				<span class="close5">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img55" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal5");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img5");																	// img#
			var modalImg = document.getElementById("img55");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close5")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/016_sfx/sfx_04_on_a_spaced_grid.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for third (3rd) occurrence of application and terminal screen shots on a single page -->

<p>We do pretty much the same thing here as we did last time:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">setRowSpacing</span><span class="p">(</span><span class="n">rowSpacing</span><span class="p">);</span>
<span class="n">setColumnSpacing</span><span class="p">(</span><span class="n">columnSpacing</span><span class="p">);</span>
</code></pre></div></div>

<p>And with these variables both having a value of <code class="language-plaintext highlighter-rouge">10</code>, we almost get a reasonable result. But, we still need the bottom margin set to get that extra bit of space for balance. And to get there, we fall back on this function:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">setMarginBottom</span><span class="p">(</span><span class="n">marginBottom</span><span class="p">);</span>
</code></pre></div></div>

<p>That gives us the end result seen in the screen-shot above. And it doesn’t matter if we set the bottom margin in the <code class="language-plaintext highlighter-rouge">Grid</code> or the <code class="language-plaintext highlighter-rouge">AppBox</code>. The result will be the same.</p>

<h2 id="conclusion">Conclusion</h2>

<p>Next time, we’ll look at our <code class="language-plaintext highlighter-rouge">Button</code> example again, but with a different purpose in mind. We’re going to play around with <code class="language-plaintext highlighter-rouge">Widget</code> opacity and ghosting.</p>

<p>Don’t miss it. See you then.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0101-grid-css-compliant-colors.html">Previous: Grid with GTK 4.x-compliant CSS Colors</a>
	</div>
	<div style="float: right;">
		<a href="./0103-widget-opacity.html">Next: Grid Spacing</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0102-grid-spacing.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
